{% extends 'base.html' %}

{% block title %}登记签收工单 - 维修管理系统{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">登记签收工单</h3>
                </div>
                <div class="card-body">
                    {% if messages %}
                    <div class="alert alert-info">
                        {% for message in messages %}
                        <div>{{ message }}</div>
                        {% endfor %}
                    </div>
                    {% endif %}

                    <!-- 工单基本信息 -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0">工单信息</h5>
                        </div>
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <strong>标题:</strong> {{ ticket.title }}
                                    {% if ticket.ticket_number %}
                                    <br><small class="text-muted">工单号: {{ ticket.ticket_number }}</small>
                                    {% endif %}
                                </div>
                                <div class="col-md-6">
                                    <strong>优先级:</strong>
                                    <span class="badge 
                                        {% if ticket.priority == 'high' %}bg-danger
                                        {% elif ticket.priority == 'medium' %}bg-warning
                                        {% else %}bg-info{% endif %}">
                                        {{ ticket.get_priority_display }}
                                    </span>
                                </div>
                            </div>
                            <div class="mb-3">
                                <strong>问题描述:</strong>
                                <div class="border rounded p-3 bg-light">
                                    {{ ticket.description|linebreaks }}
                                </div>
                            </div>
                            {% if ticket.assets.exists %}
                            <div class="mb-3">
                                <strong>已关联设备:</strong>
                                <ul class="list-unstyled mt-2">
                                    {% for asset in ticket.assets.all %}
                                    <li class="mb-1">
                                        <span class="badge bg-light text-dark">{{ asset.code }}</span>
                                        {{ asset.name }} ({{ asset.model }})
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                            {% endif %}
                        </div>
                    </div>

                        <!-- 设备选择表单 -->
                        <form method="post" novalidate enctype="multipart/form-data">
                        {% csrf_token %}
                        
                        {% if form.non_field_errors %}
                        <div class="alert alert-danger">
                            {% for error in form.non_field_errors %}
                            {{ error }}
                            {% endfor %}
                        </div>
                        {% endif %}

                        <div class="mb-3">
                            <label for="{{ form.assets.id_for_label }}" class="form-label">{{ form.assets.label }}</label>
                            {{ form.assets }}
                            {% if form.assets.errors %}
                            <div class="text-danger">
                                {% for error in form.assets.errors %}
                                {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                            <div class="form-text">{{ form.assets.help_text }}</div>
                        </div>

                        <!-- 新设备创建部分 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="card-title mb-0">或创建新设备</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="{{ form.new_device_name.id_for_label }}" class="form-label">{{ form.new_device_name.label }}</label>
                                            {{ form.new_device_name }}
                                            {% if form.new_device_name.errors %}
                                            <div class="text-danger">
                                                {% for error in form.new_device_name.errors %}
                                                {{ error }}
                                                {% endfor %}
                                            </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="{{ form.new_device_model.id_for_label }}" class="form-label">{{ form.new_device_model.label }}</label>
                                            {{ form.new_device_model }}
                                            {% if form.new_device_model.errors %}
                                            <div class="text-danger">
                                                {% for error in form.new_device_model.errors %}
                                                {{ error }}
                                                {% endfor %}
                                            </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="{{ form.new_device_serial.id_for_label }}" class="form-label">{{ form.new_device_serial.label }}</label>
                                            {{ form.new_device_serial }}
                                            {% if form.new_device_serial.errors %}
                                            <div class="text-danger">
                                                {% for error in form.new_device_serial.errors %}
                                                {{ error }}
                                                {% endfor %}
                                            </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="{{ form.new_device_type.id_for_label }}" class="form-label">{{ form.new_device_type.label }}</label>
                                            {{ form.new_device_type }}
                                            {% if form.new_device_type.errors %}
                                            <div class="text-danger">
                                                {% for error in form.new_device_type.errors %}
                                                {{ error }}
                                                {% endfor %}
                                            </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 图片上传部分 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="card-title mb-0">上传图片</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label class="form-label">上传设备图片（最多10张）</label>
                                    <input type="file" name="images" class="form-control" multiple 
                                           accept=".jpg,.jpeg,.png,.gif" 
                                           onchange="previewImages(this)">
                                    <div class="form-text">支持 JPG, JPEG, PNG, GIF 格式，单张图片不超过5MB</div>
                                </div>
                                
                                <!-- 图片预览区域 -->
                                <div id="imagePreview" class="row mt-3" style="display: none;">
                                    <!-- 图片预览将在这里动态生成 -->
                                </div>
                            </div>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">确认登记签收</button>
                            <a href="{% url 'tickets:ticket_detail' ticket.pk %}" class="btn btn-secondary">返回工单详情</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.container {
    max-width: 800px;
    margin: 20px auto;
}
.card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
    border-radius: 8px;
}
.card-header {
    background-color: #2c3e50;
    color: white;
    border-radius: 8px 8px 0 0 !important;
}
.form-control {
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 10px;
}
.form-control:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}
.btn {
    border-radius: 5px;
    padding: 10px 20px;
}
.alert {
    border-radius: 5px;
    margin-bottom: 20px;
}
.badge {
    font-size: 0.85em;
    padding: 0.5em 0.75em;
}

.image-preview-container {
    position: relative;
    margin: 10px;
    display: inline-block;
}

.image-preview {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 5px;
    border: 2px solid #ddd;
}

.delete-image-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-image-btn:hover {
    background: #c82333;
}
</style>

<script>
function previewImages(input) {
    const previewContainer = document.getElementById('imagePreview');
    previewContainer.innerHTML = '';
    previewContainer.style.display = 'none';
    
    if (input.files && input.files.length > 0) {
        previewContainer.style.display = 'flex';
        
        for (let i = 0; i < input.files.length; i++) {
            const file = input.files[i];
            const reader = new FileReader();
            
            reader.onload = function(e) {
                const div = document.createElement('div');
                div.className = 'col-md-3 image-preview-container';
                div.innerHTML = `
                    <img src="${e.target.result}" class="image-preview" alt="预览图片">
                    <button type="button" class="delete-image-btn" onclick="removeImagePreview(this, ${i})">×</button>
                `;
                previewContainer.appendChild(div);
            };
            
            reader.readAsDataURL(file);
        }
    }
}

function removeImagePreview(button, index) {
    // 移除预览
    const container = button.parentElement;
    container.remove();
    
    // 更新文件输入
    const fileInput = document.querySelector('input[name="images"]');
    const files = Array.from(fileInput.files);
    files.splice(index, 1);
    
    // 创建新的FileList（由于FileList是只读的，我们需要重新创建input）
    const dataTransfer = new DataTransfer();
    files.forEach(file => dataTransfer.items.add(file));
    fileInput.files = dataTransfer.files;
    
    // 如果没有图片了，隐藏预览区域
    const previewContainer = document.getElementById('imagePreview');
    if (previewContainer.children.length === 0) {
        previewContainer.style.display = 'none';
    }
}

// 表单提交前验证
document.querySelector('form').addEventListener('submit', function(e) {
    const fileInput = document.querySelector('input[name="images"]');
    if (fileInput.files.length > 10) {
        e.preventDefault();
        alert('最多只能上传10张图片');
        return false;
    }
    
    // 验证单个文件大小
    for (let i = 0; i < fileInput.files.length; i++) {
        if (fileInput.files[i].size > 5 * 1024 * 1024) {
            e.preventDefault();
            alert(`图片 "${fileInput.files[i].name}" 大小超过5MB限制`);
            return false;
        }
    }
});
</script>
{% endblock %}
